<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	*{
		padding:0;
		margin:0;
	}
	html{
		height:100%;
	}
	body{
		background:black;
		height:100%;
	}
	.wrap{
		height:100%;
		perspective:800px;
	}
	.box{
		width:130px;
		height:180px;
		position:absolute;
		left:50%;
		top:50%;
		margin-left:-65px;
		margin-top:-75px;
		/* background-color:lightgreen; */
		transform-style:preserve-3d;
		transform:rotateX(-15deg) rotateY(0deg);
	}
	.box li{
		width:133px;
		height:200px;
		list-style:none;
		position:absolute;
		transition:all 1500ms;
	}
	.box li img{
		width:100%;
		height:100%;
	}
  </style>
 </head>
 <body>
<div class="wrap">
	<div class="box">
		<ul>
			<li><img src="images/1.jpg" alt="" /></li>
			<li><img src="images/2.jpg" alt="" /></li>
			<li><img src="images/3.jpg" alt="" /></li>
			<li><img src="images/4.jpg" alt="" /></li>
			<li><img src="images/5.jpg" alt="" /></li>
			<li><img src="images/6.jpg" alt="" /></li>
			<li><img src="images/7.jpg" alt="" /></li>
			<li><img src="images/8.jpg" alt="" /></li>
			<li><img src="images/9.jpg" alt="" /></li>
			<li><img src="images/10.jpg" alt="" /></li>
			<li><img src="images/11.jpg" alt="" /></li>
		</ul>
	</div>
</div>
	<script type="text/javascript">
	window.onload = function (){
		var oBox = document.querySelector('.box');
		var aLi = document.querySelectorAll('.box li');
		var rotateDeg = 360 / aLi.length; //li旋转的角度 
		//开始的坐标(初始),鼠标移动到停止时候的坐标(目标),初始和目标之间的距离(也就是要旋转的角度)
		var startX,startY,endX,endY,gapX,gapY;

		//旋转初始值(也就是下一次旋转是在上一次的基础上面进行,而不是又从头开始)		
		var xRotate = -15;
		var yRotate = 0;
		for (var i = 0, len = aLi.length; i < len; i++){
			aLi[i].style.transform = "rotateY("+(i * rotateDeg) +"deg) translateZ(380px)";
		}
		document.onmousedown = function(e) {
			startX = e.clientX;
			startY = e.clientY;
			this.onmousemove = function(e) {
				endX = e.clientX;
				endY = e.clientY;
				//gap是要旋转的角度
				gapX = endX - startX;
				gapY = endY - startY;
				//乘以0.1为了移动的幅度小点
				xRotate += gapX * 0.1;
				yRotate -= gapY * 0.1;
				oBox.style.transform = "rotateX("+yRotate +"deg) rotateY("+xRotate+"deg)";
				//更新每次初始的坐标
				startX = endX;
				startY = endY;
			}
			document.onmouseup = function() {
				this.onmousemove = null;
			}
			return false; //阻止默认事件(移动过程中会选择到图片,所以给禁止)
		}
}

	</script>

 </body>
</html>
